<template>
  <div id="bar" :style="size">
    <div class="dragRectTop"></div>
    <Echarts :size="size" :options="options" />
    <div class="dragRectBottom"></div>
  </div>

</template>

<script>
import Echarts from '@/components/Echarts'
export default {
  data () {
    return {
      options: {
        title: {
          text: '2000年各行业市场占有金额',
          textStyle: {
            color: "rgba(255,255,255,0.9)",
          },
          left: "center"
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '0%',
          top: "10%",
          right: '0%',
          bottom: '4%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['旅游行业', '教育培训', '医疗行业', '游戏行业', '电商行业', '社交行业', '金融行业'],
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,0.6)",
                fontSize: "10"
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,0.6)",
                fontSize: "10"
              }
            },
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.1)",
              }
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.1)",
              }
            }
          }
        ],
        series: [
          {
            name: '直接访问',
            type: 'bar',
            barWidth: '35%',
            data: [200, 252, 300, 334, 990, 1330, 720],
            itemStyle: {
              barBorderRadius: 5
            }
          }
        ]
      },
      size: {
        width: "100%",
        height: "3.875rem"
      },
      year: 2000
    }
  },
  components: {
    Echarts
  },
  mounted () {
    setInterval(() => {
      this.year++
      this.options.title.text = `${this.year}年各行业市场占有金额`
      this.options.series[0].data.forEach((item, i) => {
        this.options.series[0].data[i] = item + parseInt(Math.random() * 100) - 50
      })
      // console.log(this.options.series[0].data)
			// 确保options更新，watch能监听到
      this.options = { ...this.options }
    }, 2000)
  }
}
</script>

<style scoped>
	#bar{
		background-image: url(../assets/line.png);
		position: relative;
		border: 1px solid rgba(255, 255, 255, 0.1);
	}
	.dragRectTop{
		width: 100%;
		height: 10px;
		position: absolute;
		top: 0;
		left: 0;
	}
	.dragRectTop::before{
		width: 10px;
		height: 10px;
		border-left: 2px solid #02a6b5;
		border-top: 2px solid #02a6b5;
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 0;

	}
	.dragRectTop::after{
		width: 10px;
		height: 10px;
		border-right: 2px solid #02a6b5;
		border-top: 2px solid #02a6b5;
		content: "";
		display: block;
		position: absolute;
		right: 0;
		top: 0;

	}
	.dragRectBottom{
		width: 100%;
		height: 10px;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.dragRectBottom::before{
		width: 10px;
		height: 10px;
		border-left: 2px solid #02a6b5;
		border-bottom: 2px solid #02a6b5;
		content: "";
		display: block;
		position: absolute;
		left: 0;
		bottom: 0;

	}
	.dragRectBottom::after{
		width: 10px;
		height: 10px;
		border-right: 2px solid #02a6b5;
		border-bottom: 2px solid #02a6b5;
		content: "";
		display: block;
		position: absolute;
		right: 0;
		bottom: 0;

	}
</style>